body,h1,h2,h3,h4,h5,h6,ul,li,p,dl,dt,dd,span,button{
    margin:0;
    padding:0;
}
h1,h2,h3,h4,h5,h6{
    font-size:16px;
    font-weight:normal;
}
a{
    text-decoration:none;
}
i{
    font-style:normal;
}
button,input{
    border:none;
    outline:none;
}
body{
    background:rgba(238,238,238,1);
}
.header{
    width:100vw;
    height:44px;
    background:#ffffff;
    display:flex;
    flex:row nowrap;
    justify-content:space-between;
    align-items:center;
    padding:0 15px;
    box-sizing:border-box;
    position:absolute;
    top:0;
    left:0;
    border-bottom:1px solid rgba(217,217,217,1);
    .header-left{
        h2{
            font-size:18px;
            color:#333333;
            line-height:18px;
        }
    }
    .header-right{
        display:flex;
        justify-content:center;
        align-items:center;
        p{
            font-size:16px;
            color:#333333;
        }
        &>p:nth-child(1){
            width:32px;
            height:19px;
            line-height:18px;
            color:#ffffff;
            font-size:10px;
            text-align:center;
            background:rgba(253,112,96,1);
            border-radius:2px;
            position:relative;
            &::before{
                content:'';
                display:block;
                width:6px;
                height:6px;
                background:#ffffff;
                border-radius:50%;
                position:absolute;
                top:50%;
                left:0;
                transform:translate(-50%,-50%);
            }
            &::after{
                content:'';
                display:block;
                width:6px;
                height:6px;
                background:#ffffff;
                border-radius:50%;
                position:absolute;
                top:50%;
                right:0;
                transform:translate(50%,-50%);
            }
        }
        &>p:nth-child(2){
            margin-left:10px;
        }
    }
}
.goods-list{
    width:100vw;
    height:calc(100vh - 154px);
    overflow-y:auto;
    position:absolute;
    top:44px;
    left:0;
    .free-shipping{
        width:100%;
        height:108px;
        background:#ffffff;
        margin-bottom:10px;
        div{
            width:100%;
            height:38px;
            background:rgba(255,248,216,1);
            font-size:15px;
            line-height:38px;
            color:#f48f18;
            text-indent:10px;
        }
        a{
            display:block;
        }
        a:nth-of-type(1){
            display:flex;
            margin-left:15px;
            padding:10px 15px 10px 0;
            span:nth-child(1){
                display:block;
                width:48px;
                height:16px;
                background:rgba(252,103,95,1);
                color:#ffffff;
                font-size:10px;
                line-height:16px;
                text-align:center;
                border-radius:2px;
                margin:0 8px 0 2px;
            }
            span:nth-child(2){
                display:block;
                width:224px;
                font-size:14px;
                line-height:14px;
                color:#333333;
            }
            span:nth-child(3){
                display:block;
                font-size:12px;
                line-height:12px;
                color:#dd1a21;
                margin-left:15px;
                display:flex;
                align-items:center;
                i{
                    display:block;
                }
                i:nth-child(2){
                 font-size:8px;
                 font-weight:bolder;
                 padding:0 0 0 4px;
                }
            }
        }
        a:nth-of-type(2){
            display:block;
            width:318px;
            height:28px;
            font-size:12px;
            color:#333333;
            background:rgba(255,248,247,1);
            font-size:12px;
            color:#333333;
            line-height:28px;
            text-indent:8px;
            border-radius:4px;
            margin:0 15px 5px 43px;
            display:flex;
            justify-content:space-between;
            i:nth-child(2){
                font-size:8px;
                font-weight:bolder;
                margin-right:10px;
            }
        }
    }
    .goods{
        li{
            width:calc(100vw - 30px);
            background:#ffffff;
            display:flex;
            align-items:center;
            padding:12px 15px 12px 15px;
            margin-bottom:10px;
            .goods-left{
                color:rgba(221,26,33,1);
                font-size:19px;
            }
            .goods-middle{
                background:rgba(238,238,238,1);
                border-radius:10px;
                margin:0 12px 0 12px;
                img{
                    display:block;
                    width:86px;
                    height:86px;
                }
            }
            .goods-right{
                >h2{
                    font-size:14px;
                    color:#333333;
                    strong{
                        color:#f48f18;
                        margin-right:2px;
                    }
                }
                >span{
                    display:block;
                    width:46px;
                    height:20px;
                    border:1px solid #cccccc;
                    background:#FAFAFA;
                    border-radius:2px;
                    font-size:12px;
                    color:#7f7f7f;
                    line-height:20px;
                    padding-left:5px;
                    box-sizing:border-box;
                    margin-top:5px;
                    i{
                        font-size:9px;
                        padding:0 5px;
                    }
                }
                >div{
                    display:flex;
                    justify-content:space-between;
                    margin-top:10px;
                    >div:nth-child(1){
                        >span:nth-child(1){
                            font-size:16px;
                            color:#333333;
                            margin-right:4px;
                        }
                        >span:nth-child(2){
                            font-size:12px;
                            color:#999999;
                            text-decoration:line-through;
                        }
                    }
                    >div:nth-child(2){
                        display:flex;
                        span{
                            display:block;
                            width:29px;
                            height:28px;
                            border:1px solid #cccccc;
                            border-right:none;
                            border-left:none;
                            text-align:center;
                            line-height:28px;
                        }
                        button{
                            width:29px;
                            height:28px;
                            box-sizing:content-box;
                            border:1px solid #cccccc;
                            background:#ffffff;
                            color:#cccccc;
                            font-size:16px;
                        }
                    }
                }
            }
        }
    }
}
.footer{
    width:100vw;
    height:110px;
    background:#ffffff;
    position:absolute;
    bottom:0;
    left:0;
    border-top:2px solid rgba(217,217,217,1);
    .footer-subtotal{
        width:100vw;
        height:60px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        .subtotal-left{
            height:60px;
            display:flex;
            align-items:center;
            margin-left:15px;
            &>p:nth-child(1){
                color:rgba(221,26,33,1);
                font-size:19px;
                margin-right:8px;
                margin-top:2px;
            }
            &>p:nth-child(2){
                color: #7f7f7f;
                font-size:14px;
            }
        }
        .subtotal-right{
            display:flex;
            align-items:center;
            & span{
                display:block;
                &:nth-child(1){
                    color:rgba(221,26,33,1);
                    font-size:14px;
                }
                &:nth-child(2){
                    color: #7f7f7f;
                    font-size:11px;
                    margin-left:10px;
                }
            }
            & button{
                width:114px;
                height:60px;
                border:none;
                color:#ffffff;
                font-size:14px;
                background:rgba(221,26,33,1);
                margin-left:4px;
            }
        }
    }
    .footer-nav{
        width:100vw;
        height:49px;
        display:flex;
        justify-content:space-around;
        align-items: center;
        border:1px solid rgba(217,217,217,1);
        color:#666666;
        dl{
            height:50px;
            display:flex;
            flex-direction: column;
            align-items:center;
            justify-content:space-evenly;
            dt{
                font-size:20px;
            }
            dd{
                font-size:12px;
            }
        }
    }
}